<template>
  <transition name="fade">
    <div class="my-pop-up" v-if="value">
      <div class="mask" @click="closePopup"></div>
      <div class="content" style="height: 40%"></div>
    </div>
  </transition>
</template>
<script>
export default {
  props: ['value'],
  data() {
    return {}
  },
  methods: {
    closePopup() {
      this.$emit('input', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  // height: ;
}
.my-pop-up {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 100;
  .mask {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    position: absolute;
    left: 0;
    top: 0;
  }
  .content {
    width: 100%;
    // height: 40%;
    max-height: 60%;
    background: #fff;
    z-index: 100;
  }
}
</style>
